<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>游戏列表</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 配置Tailwind自定义颜色 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#FF7D00',
                        dark: '#1D2129',
                        light: '#F2F3F5'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .pagination-active {
                @apply bg-primary text-white;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-inter text-dark">
<!-- 导航栏 -->
<nav class="bg-white shadow-md sticky top-0 z-50">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
        <div class="flex items-center space-x-10">
            <a href="#" class="text-primary font-bold text-2xl flex items-center">
                <i class="fa fa-gamepad mr-2"></i>GameStore
            </a>
        </div>
        <div class="flex items-center space-x-4">
            <a href="#" class="text-gray-600 hover:text-primary transition-colors">
                <i class="fa fa-shopping-cart text-xl"></i>
            </a>
            <a href="#" class="text-gray-600 hover:text-primary transition-colors">
                <i class="fa fa-user-circle-o text-xl"></i>
            </a>
        </div>
    </div>
</nav>

<!-- 主内容区 -->
<main class="container mx-auto px-4 py-8">
    <!-- 页面标题 -->
    <div class="mb-8">
        <h1 class="text-[clamp(1.75rem,4vw,2.5rem)] font-bold text-dark">热门游戏</h1>
        <p class="text-gray-500 mt-2">点击游戏图片查看详情</p>
    </div>

    <!-- 游戏列表 -->
    <div id="game-container" class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <!-- 游戏卡片将通过JavaScript动态加载 -->
    </div>

    <!-- 分页控件 -->
    <div class="flex justify-center mt-12">
        <div id="pagination" class="inline-flex rounded-md shadow">
            <button id="prev-page" class="px-3 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                <i class="fa fa-chevron-left"></i>
            </button>
            <!-- 页码将通过JavaScript动态生成 -->
            <button id="next-page" class="px-3 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                <i class="fa fa-chevron-right"></i>
            </button>
        </div>
    </div>
</main>

<!-- 页脚 -->
<footer class="bg-dark text-white py-8 mt-12">
    <div class="container mx-auto px-4 text-center">
        <p class="text-gray-400">© 2023 GameStore. 保留所有权利</p>
    </div>
</footer>

<!-- JavaScript -->
<script>
    // 游戏数据
    const games = [
        { id: 1, name: "Delta", genre: "动作冒险游戏", image: "delta.jpg", link: "10.html" },
        { id: 2, name: "Horizon", genre: "开放世界冒险", image: "horizon.jpg", link: "20.html" },
        { id: 3, name: "Counter-Strike", genre: "第一人称射击", image: "cs2.jpg", link: "12.html" },
        { id: 4, name: "APEX", genre: "第一人称射击", image: "apex.jpg", link: "14.html" },
        { id: 5, name: "赛博朋克2077", genre: "角色扮演 剧情", image: "cyberpunk.jpg", link: "13.html" },
        { id: 6, name: "艾尔登法环", genre: "魂系 角色扮演", image: "eilden.jpg", link: "15.html" },
        { id: 7, name: "双人成行", genre: "角色扮演", image: "friends.jpg", link: "21.html" },
        { id: 8, name: "鹅鸭杀", genre: "大逃杀 角色扮演", image: "goose.jpg", link: "22.html" },
        { id: 9, name: "枪战王者", genre: "射击 冒险", image: "gun.jpg", link: "23.html" },
        { id: 10, name: "饥荒", genre: "生存 冒险", image: "hunger.jpg", link: "18.html" },
        { id: 11, name: "冰封世界", genre: "生存 冒险", image: "iceworld.jpg", link: "24.html" },
        { id: 12, name: "NBA2K25", genre: "篮球 休闲", image: "nba.jpg", link: "11.html" },
        { id: 13, name: "守望先锋-英雄归来", genre: "射击 动作", image: "ow.jpg", link: "25.html" },
        { id: 14, name: "绝地求生", genre: "大逃杀 射击 第三人称", image: "pubg.jpg", link: "18.html" },
        { id: 15, name: "世界拉力锦标赛7", genre: "汽车 竞速", image: "wrc7.jpg", link: "27.html" }
    ];

    // 分页参数
    const gamesPerPage = 6;
    let currentPage = 1;
    const totalPages = Math.ceil(games.length / gamesPerPage);

    // DOM元素
    const gameContainer = document.getElementById('game-container');
    const paginationContainer = document.getElementById('pagination');
    const prevPageBtn = document.getElementById('prev-page');
    const nextPageBtn = document.getElementById('next-page');

    // 渲染游戏列表
    function renderGames(page) {
        gameContainer.innerHTML = '';

        // 计算当前页的游戏索引范围
        const startIndex = (page - 1) * gamesPerPage;
        const endIndex = Math.min(startIndex + gamesPerPage, games.length);

        // 渲染当前页的游戏
        for (let i = startIndex; i < endIndex; i++) {
            const game = games[i];
            const gameCard = document.createElement('div');
            gameCard.className = 'group bg-white rounded-xl shadow-md overflow-hidden hover-scale';
            gameCard.innerHTML = `
                <a href="${game.link}" class="block">
                    <div class="relative">
                        <img src="${game.image}" alt="${game.name} 游戏封面" class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-300">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end">
                            <div class="p-4 w-full">
                                <h3 class="font-bold text-xl text-white">${game.name}</h3>
                                <p class="text-gray-200 text-sm">${game.genre}</p>
                            </div>
                        </div>
                    </div>
                </a>
            `;
            gameContainer.appendChild(gameCard);
        }

        // 添加游戏卡片悬停效果
        document.querySelectorAll('.hover-scale').forEach(card => {
            card.addEventListener('mouseenter', () => {
                card.style.transform = 'scale(1.03)';
                card.style.boxShadow = '0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)';
            });

            card.addEventListener('mouseleave', () => {
                card.style.transform = 'scale(1)';
                card.style.boxShadow = '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)';
            });
        });
    }

    // 渲染分页控件
    function renderPagination() {
        // 清空现有页码
        while (paginationContainer.children.length > 2) {
            paginationContainer.removeChild(paginationContainer.children[1]);
        }

        // 确定要显示的页码范围
        let startPage = Math.max(1, currentPage - 2);
        let endPage = Math.min(startPage + 4, totalPages);

        // 调整起始页码，如果结束页码超过总页数
        if (endPage - startPage < 4 && startPage > 1) {
            startPage = Math.max(1, endPage - 4);
        }

        // 添加页码按钮
        for (let i = startPage; i <= endPage; i++) {
            const pageBtn = document.createElement('button');
            pageBtn.className = `px-3 py-2 border-t border-b border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 ${i === currentPage ? 'pagination-active' : ''}`;
            pageBtn.textContent = i;
            pageBtn.addEventListener('click', () => {
                currentPage = i;
                renderGames(currentPage);
                renderPagination();
            });

            // 将页码按钮插入到"下一页"按钮之前
            paginationContainer.insertBefore(pageBtn, nextPageBtn);
        }

        // 更新上一页和下一页按钮状态
        prevPageBtn.disabled = currentPage === 1;
        nextPageBtn.disabled = currentPage === totalPages;

        // 添加首尾页省略号
        if (startPage > 1) {
            const firstPageBtn = document.createElement('button');
            firstPageBtn.className = 'px-3 py-2 border-t border-b border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50';
            firstPageBtn.textContent = '1';
            firstPageBtn.addEventListener('click', () => {
                currentPage = 1;
                renderGames(currentPage);
                renderPagination();
            });
            paginationContainer.insertBefore(firstPageBtn, paginationContainer.children[1]);

            const ellipsisBtn = document.createElement('span');
            ellipsisBtn.className = 'px-3 py-2 border-t border-b border-gray-300 bg-white text-sm font-medium text-gray-700';
            ellipsisBtn.textContent = '...';
            paginationContainer.insertBefore(ellipsisBtn, paginationContainer.children[2]);
        }

        if (endPage < totalPages) {
            const ellipsisBtn = document.createElement('span');
            ellipsisBtn.className = 'px-3 py-2 border-t border-b border-gray-300 bg-white text-sm font-medium text-gray-700';
            ellipsisBtn.textContent = '...';
            paginationContainer.appendChild(ellipsisBtn, nextPageBtn);

            const lastPageBtn = document.createElement('button');
            lastPageBtn.className = 'px-3 py-2 border-t border-b border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50';
            lastPageBtn.textContent = totalPages;
            lastPageBtn.addEventListener('click', () => {
                currentPage = totalPages;
                renderGames(currentPage);
                renderPagination();
            });
            paginationContainer.appendChild(lastPageBtn, nextPageBtn);
        }
    }

    // 事件监听
    prevPageBtn.addEventListener('click', () => {
        if (currentPage > 1) {
            currentPage--;
            renderGames(currentPage);
            renderPagination();
        }
    });

    nextPageBtn.addEventListener('click', () => {
        if (currentPage < totalPages) {
            currentPage++;
            renderGames(currentPage);
            renderPagination();
        }
    });

    // 初始渲染
    renderGames(currentPage);
    renderPagination();
</script>
</body>
</html>
